<template>
  <el-menu v-bind="$attrs" :default-active="highlightMenu" :collapse="isMenuCollapse" :unique-opened="isMenuAccordion" :collapse-transition="false">
    <SubMenu :menu-list="menuList"></SubMenu>
  </el-menu>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useThemeStore } from '@/stores/theme'
import { useMenuStore } from '@/stores/menu'
import SubMenu from './SubMenu.vue'

const route = useRoute()

const themeStore = useThemeStore()
const { isMenuCollapse, isMenuAccordion } = storeToRefs(themeStore)

const menuList = computed(() => useMenuStore().allRoutesTree)
const highlightMenu = computed(() => {
  return route.meta.highlight ? route.meta.highlight : route.path
})
</script>

<style lang="scss" scoped></style>
